<template>

  <el-dialog :close-on-click-modal="false" title="文件预览" :visible.sync="visible" width="900px" append-to-body>
    <div class="file-previewer">
      <!-- <div class="preview-header">
        <h3>{{ fileName }}</h3>
        <button @click="handleClose" class="close-btn">
          <i class="fa fa-times"></i>
        </button>
      </div> -->

      <div class="preview-content">
        <!-- PDF预览 (使用vue-pdf) -->
        <div v-if="fileType === 'pdf'" class="pdf-container">
          <!-- 分页导航 -->
          <div class="pdf-controls">
            <button
              @click="currentPage = 1"
              :disabled="currentPage === 1"
              class="control-btn"
            >
              首页
            </button>
            <button
              @click="currentPage--"
              :disabled="currentPage === 1"
              class="control-btn"
            >
              上一页
            </button>
            <span class="page-info">{{ currentPage }} / {{ totalPages }}</span>
            <button
              @click="currentPage++"
              :disabled="currentPage === totalPages"
              class="control-btn"
            >
              下一页
            </button>
            <button
              @click="currentPage = totalPages"
              :disabled="currentPage === totalPages"
              class="control-btn"
            >
              尾页
            </button>
            <div class="zoom-controls">
              <button @click="scale -= 0.1" class="control-btn">
                <i class="fa fa-search-minus"></i>
              </button>
              <span class="zoom-level">{{ (scale * 100).toFixed(0) }}%</span>
              <button @click="scale += 0.1" class="control-btn">
                <i class="fa fa-search-plus"></i>
              </button>
            </div>
          </div>

          <!-- PDF内容 -->
          <pdf
            :src="fileUrl"
            :page="currentPage"
            :scale="scale"
            @num-pages="totalPages = $event"
            @page-loaded="currentPage = $event"
            class="pdf-page"
          ></pdf>
        </div>

        <!-- Word/Excel预览 - 仍使用微软在线服务 -->
        <div v-else-if="fileType === 'word' || fileType === 'excel'" class="office-container">
          <iframe
            :src="officePreviewUrl"
            frameborder="0"
            class="office-frame"
            :title="`预览${fileName}`"
          ></iframe>
        </div>

        <!-- 不支持的文件类型 -->
        <div v-else class="unsupported">
          <i class="fa fa-file-o fa-5x"></i>
          <p>不支持预览此类型文件</p>
          <button @click="handleDownload" class="download-btn">
            <i class="fa fa-download"></i> 下载文件
          </button>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible=false;">关闭</el-button>
    </div>
  </el-dialog>


</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  },

  data() {
    return {
      fileUrl:'',
      visible:false,
      fileType: '',
      fileName: '',
      currentPage: 1, // 当前页码
      totalPages: 0,  // 总页数
      scale: 1.0      // 缩放比例
    }
  },
  computed: {
    officePreviewUrl() {
      const encodedUrl = encodeURIComponent(this.fileUrl)
      return `https://view.officeapps.live.com/op/view.aspx?src=${encodedUrl}`
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.initFilePreview()
      } else {
        // 重置PDF状态
        this.currentPage = 1
        this.scale = 1.0
      }
    },
    fileUrl() {
      if (this.visible) {
        this.initFilePreview()
      }
    }
  },
  methods: {
    open(url){
      this.visible=true
      this.fileUrl=url;
    },
    initFilePreview() {
      this.extractFileNameAndType()
    },
    extractFileNameAndType() {
      const urlParts = this.fileUrl.split('/')
      this.fileName = urlParts[urlParts.length - 1]

      const ext = this.fileName.split('.').pop().toLowerCase()

      if (ext === 'pdf') {
        this.fileType = 'pdf'
      } else if (['doc', 'docx'].includes(ext)) {
        this.fileType = 'word'
      } else if (['xls', 'xlsx'].includes(ext)) {
        this.fileType = 'excel'
      } else {
        this.fileType = 'other'
      }
    },

    handleClose() {
      this.$emit('update:visible', false)
    },

    handleDownload() {
      const a = document.createElement('a')
      a.href = this.fileUrl
      a.download = this.fileName
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
    }
  }
}
</script>

<style scoped>
/* .file-previewer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: flex;
  flex-direction: column;
} */

.preview-header {
  padding: 15px 20px;
  background-color: #333;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.close-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.preview-content {
  flex: 1;
  overflow: auto;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.pdf-container {
  width: 100%;
  max-width: 800px;
  color: white;
}

.pdf-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.control-btn {
  padding: 5px 10px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin: 0 2px;
  transition: background-color 0.2s;
}

.control-btn:disabled {
  background-color: #999;
  cursor: not-allowed;
}

.control-btn:hover:not(:disabled) {
  background-color: #359e75;
}

.page-info {
  margin: 0 10px;
}

.zoom-controls {
  display: flex;
  align-items: center;
}

.zoom-level {
  margin: 0 5px;
  min-width: 40px;
  text-align: center;
}

.pdf-page {
  width: 100%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  margin-bottom: 15px;
  background-color: white;
}

.office-container {
  width: 100%;
  max-width: 1200px;
  height: calc(100vh - 100px);
}

.office-frame {
  width: 100%;
  height: 100%;
  min-height: 600px;
}

.unsupported {
  color: white;
  text-align: center;
  padding: 40px;
}

.unsupported i {
  margin-bottom: 20px;
  color: #ccc;
}

.download-btn {
  margin-top: 20px;
  padding: 8px 16px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background-color 0.2s;
}

.download-btn:hover {
  background-color: #359e75;
}
</style>
